<template>
  <div style="height: 100%">
    <a-spin :spinning="isTableLoading" wrapperClassName="spinning-container">
      <div class="header-container" ref="headerContainer">
        <page-header :title="l('Users')"></page-header>
        <a-card :bordered="false">
          <a-form :layout="'vertical'" @submit.prevent="getSearchData">
            <a-row :gutter="8">
              <!-- 搜索 -->
              <a-col :sm="24">
                <a-form-item>
                  <a-input-search
                    name="filterText"
                    :placeholder="l('SearchWithThreeDot')"
                    @search="getSearchData"
                    enterButton
                    v-model:value="filterText"
                  />
                </a-form-item>
              </a-col>
              <!-- 权限过滤 -->
              <a-col :sm="12">
                <a-form-item>
                  <permission-combox
                    :multiple="true"
                    :dropDownStyle="{ 'max-height': '500px' }"
                    :selectedPermission="selectedPermission"
                    @selectedPermissionChange="selectedPermissionChange($event)"
                  >
                  </permission-combox>
                </a-form-item>
              </a-col>
              <!-- 角色过滤 -->
              <a-col :sm="12">
                <a-form-item>
                  <role-combox
                    :selectedRole="role"
                    @selectedRoleChange="selectedRoleChange($event)"
                  ></role-combox>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <!-- 操作部分 -->
          <a-row :gutter="8" justify="end" class="action">
            <!-- 添加用户 -->
            <a-button
              type="primary"
              v-if="isGranted('Pages.Administration.Users.Create')"
              @click="createOrEdit()"
            >
              <plus-outlined />
              <span>{{ l('CreateNewUser') }}</span>
            </a-button>
            <!-- 批量删除 -->
            <a-button
              type="'danger'"
              v-if="isGranted('Pages.Administration.Users.Delete')"
              @click="batchDelete()"
            >
              <delete-outlined />
              <span>{{ l('BatchDelete') }}</span>
            </a-button>
            <!-- 下载Excel模板 -->
            <a-button @click="downloadTemplate()">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#gctdaochuexcel"></use>
              </svg>
              <span>{{ l('ImportToExcelTemplate') }}</span>
            </a-button>

            <!-- 导入Excel -->
            <g-excel-import
              :text="'导入Excel'"
              type="default"
              ref="excelImportModel"
              v-if="isGranted('Pages.UserExtension.ImportExcel')"
              @fileUploadedSuccessEvent="uploadPictureChange($event)"
            >
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#gctdaoruexcel"></use>
              </svg>
              <span>{{ l('BatchDelete') }}</span>
            </g-excel-import>
          </a-row>

          <!-- 数据部分 -->
          <div class="my-md">
            <a-alert :type="'info'" :showIcon="true">
              <template #message>
                <span v-html="l('GridSelectedXItemsTips', selectedCount)"></span>
                <a @click="restCheckStatus()" class="ml-md">{{ l('ClearEmpty') }}</a>
                <a-divider type="vertical"></a-divider>
                <a @click="refresh()">{{ l('Refresh') }}</a>
              </template>
            </a-alert>
          </div>
        </a-card>
      </div>
      <!-- 表格 -->
      <div class="table-container">
        <a-table
          size="middle"
          :scroll="{ x: tableWidthScroll, y: tableHeightScroll }"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data-source="dataList"
          :pagination="{
            total: totalItems,
            current: pageNumber,
            pageSize: pageSize,
            showTotal: showTotalInfo,
            showQuickJumper: true,
            showSizeChanger: true,
            change: pageNumberChange,
            showSizeChange: pageNumberChange,
            pageSizeOptions: pageSizeOptions,
            size: 'middle',
          }"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            getCheckboxProps: getCheckboxProps,
            checkAll: checkAll,
          }"
          @change="tableChange"
        >
          <!-- tbody插槽 -->
          <template #bodyCell="{ column, record }">
            <!-- 角色 -->
            <template v-if="column.key === 'roles'">
              <p class="roles">
                <a-tag v-for="item in record.roles" :key="item.roleId">{{ item.roleName }} </a-tag>
              </p>
            </template>

            <!-- 邮箱是否已验证 -->
            <template v-if="column.key === 'isEmailConfirmed'">
              <a class="isEmailConfirmed">
                <CheckCircleTwoTone v-if="record.isEmailConfirmed" twoToneColor="#52c41a" />
                <CloseCircleTwoTone v-if="!record.isEmailConfirmed" twoToneColor="#ff0000" />
              </a>
            </template>

            <!-- 是否已激活 -->
            <template v-if="column.key === 'isActive'">
              <a class="isActive">
                <CheckCircleTwoTone v-if="record.isActive" twoToneColor="#52c41a" />
                <CloseCircleTwoTone v-if="!record.isActive" twoToneColor="#ff0000" />
              </a>
            </template>

            <!-- 上次登录时间 -->
            <template v-if="column.key === 'lastLoginTime'">
              <p>{{ _moment(record.lastLoginTime) }}</p>
            </template>

            <!-- 创建时间 -->
            <template v-if="column.key === 'creationTime'">
              <p>{{ _moment(record.creationTime) }}</p>
            </template>

            <!-- 操作列 -->
            <template v-if="column.key === 'actions'">
              <div>
                <!-- 修改 -->
                <a
                  class="table-edit"
                  @click="createOrEdit(record)"
                  v-if="!isSuperAdmin(record) && isGranted('Pages.Administration.Users.Edit')"
                >
                  <edit-outlined />
                  {{ l('Edit') }}
                </a>

                <!-- 删除 -->
                <template
                  v-if="
                    !isAdmin(record) &&
                    !isCurrentUser(record) &&
                    isGranted('Pages.Administration.Users.Delete')
                  "
                >
                  <a-divider type="vertical" />
                  <a-popconfirm
                    placement="top"
                    :ok-text="l('Ok')"
                    :cancel-text="l('Cancel')"
                    @confirm="deleteItem(record)"
                  >
                    <template #title>{{ l('ConfirmDeleteWarningMessage') }}</template>
                    <a>
                      <delete-outlined />
                      {{ l('Delete') }}
                    </a>
                  </a-popconfirm>
                </template>

                <!-- 更多 -->
                <template
                  v-if="
                    !isAdmin(record) &&
                    isGrantedAny(
                      'Pages.Administration.Users.Impersonation',
                      'Pages.Administration.Users.ChangePermissions',
                      'Pages.Administration.Users.Unlock',
                    )
                  "
                >
                  <a-divider type="vertical" />
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click.prevent>
                      {{ l('Actions') }}
                      <down-outlined />
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item
                          v-if="
                            !isCurrentUser(record) &&
                            isGranted('Pages.Administration.Users.Impersonation')
                          "
                          @click="tenantImpersonateLogin(record)"
                        >
                          <a href="javascript:;">
                            <login-outlined />
                            <span>{{ l('LoginAsThisUser') }}</span>
                          </a>
                        </a-menu-item>
                        <a-menu-item
                          v-if="isGranted('Pages.Administration.Users.Edit')"
                          @click="editUserPermissions(record)"
                        >
                          <a href="javascript:;">
                            <codepen-outlined />
                            <span>{{ l('Permissions') }}</span>
                          </a>
                        </a-menu-item>
                        <a-menu-item v-if="enabledUnlock()" @click="unlockTenantAdminUser(record)">
                          <a href="javascript:;">
                            <unlock-outlined />
                            <span>{{ l('Unlock') }}</span>
                          </a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </template>
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import User from './user';

  export default defineComponent({
    name: 'users',
    mixins: [User],
  });
</script>

<style scoped lang="less">
  @import './users.less';
</style>
